<template>
  <div style="width: 100px">
    <el-dialog title="输入车牌号" width="580px" :visible.sync="dialogVisible" @open="init" @close="close">
      <section style="display: flex; flex-wrap: wrap">
        <section v-for="item in preVal" :class=" { 'item': !item.isActive, 'activeItem': item.isActive }"  @click="getPre(item.prefix,0)">{{item.prefix}}</section>
      </section>

      <section style="display: flex; margin-top: 10px; flex-wrap: wrap">
        <section v-for="item in preVal2"  @click="getPre(item.prefix,1)" :class=" { 'item2': !item.isActive, 'activeItem': item.isActive }">{{item.prefix}}</section>
      </section>
      <section class="number" style="margin-top: 10px; margin-bottom: 14px">
        <div style="margin-left:50px;display:flex;margin-top:11px">
          <section class="item3">{{preValItem}}</section>
          <section class="item3">{{preValItem2}}</section>
          <section class="item3">
              <input type="text" maxlength="1" v-model="val[0]" ref="myInput" @input="changeInput($event,2)">
          </section>
          <section class="item3"><input type="text" maxlength="1" ref="myInput2" v-model="val[1]" @input="changeInput($event,3)"></section>
          <section class="item3"><input type="text" ref="myInput3" v-model="val[2]" @input="changeInput($event,4)"></section>
          <section class="item3"><input type="text" maxlength="1"ref="myInput4" v-model="val[3]" @input="changeInput($event,5)"  ></section>
          <section class="item3"><input type="text" maxlength="1" ref="myInput5" v-model="val[4]" @input="changeInput($event,5)" ></section>
          <el-checkbox v-model="checked" style="margin-top:10px;margin-left:20px" @change="getTurckNumber">无车牌</el-checkbox>
        </div>
      </section>
      <span slot="footer" class="dialog-footer">
        <div class="footer-input">
          <el-button
            size="small"
            type="primary"
            @click="doSubmit()"
            v-noMoreClick
            >确定</el-button
          >
          <el-button size="small" @click="close()">取消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getTurckNumber,queryPrelist,validate} from '@/api/truck/truckDriver.js'
export default {
  data() {
    return {
      isShow:false,
      classObject:{item: true, activeItem:false },
      dialogVisible: false,
      checked:false,
      preVal:[],
      isActive:false,
      preValItem:'',
      preValItem2:'',
      preVal2:[
          {
              prefix:'Q',
              isActive:false
          },
          {
              prefix:'w',
              isActive:false
          },
          {
              prefix:'E',
              isActive:false
          },
          {
              prefix:'R',
              isActive:false
          },
          {
              prefix:'T',
              isActive:false
          },
          {
              prefix:'Y',
              isActive:false
          },
          {
              prefix:'U',
              isActive:false
          },
          {
              prefix:'P',
              isActive:false
          },
          {
              prefix:'A',
              isActive:false
          },
          {
              prefix:'S',
              isActive:false
          },
          {
              prefix:'D',
              isActive:false
          },
          {
              prefix:'F',
              isActive:false
          },
          {
              prefix:'G',
              isActive:false
          },
          {
              prefix:'H',
              isActive:false
          },
          {
              prefix:'J',
              isActive:false
          },
          {
              prefix:'K',
              isActive:false
          },
          {
              prefix:'L',
              isActive:false
          },
          {
              prefix:'Z',
              isActive:false
          },
          {
              prefix:'X',
              isActive:false
          },
          {
              prefix:'C',
              isActive:false
          },
          {
              prefix:'V',
              isActive:false
          },
          {
              prefix:'B',
              isActive:false
          },
          {
              prefix:'N',
              isActive:false
          },
          {
              prefix:'M',
              isActive:false
          }
      ],
      val:['','','','',''],

    };
  },
  methods: {
      //打开弹框
      init(){
        this.checked=false
        if (sessionStorage.getItem("truckNumberArry")) {
        let truckNumberArray=[]
        truckNumberArray=JSON.parse(sessionStorage.getItem("truckNumberArry"));
        this.getPre(truckNumberArray[0],0)
        this.getPre(truckNumberArray[1],1)
        this.val[0]=truckNumberArray[2]
        this.val[1]=truckNumberArray[3]
        this.val[2]=truckNumberArray[4]
        this.val[3]=truckNumberArray[5]
        this.val[4]=truckNumberArray[6]
        }else{
        this.val=[]
        this.getPre('',0)
        this.getPre('',1)
        }
      },
    //无车牌号
    getTurckNumber(val){
        if (val) {
            getTurckNumber().then((res)=>{
                this.val=res.data.result;
                this.preValItem='无'
                this.preValItem2='牌'
                console.log(res)
            })
        }

    },
    doSubmit() {
        if (this.preValItem&&this.preValItem2&&this.val[0]&&this.val[1]&&this.val[2]&&this.val[3]&&this.val[4]) {
            let carNumber=this.preValItem+this.preValItem2+this.val[0]+this.val[1]+this.val[2]+this.val[3]+this.val[4]
        validate({
            truckNumber:carNumber
        }).then(res=>{
            if (res.data.code==='200') {
            this.$store.commit('truck/setTruckNumber', carNumber)
            this.dialogVisible=false
            return
            }
        })
        }else{
            this.$message.error('请您填写完整的车牌号码');
        }

    },
    close() {
        sessionStorage.setItem("truckNumberArry",'')
        console.log()
        this.dialogVisible=false
    },
    //获得车牌前缀
    queryPrelist(){
        queryPrelist().then((res)=>{
            res.data.result.forEach(item => {
                this.$set(item,'isActive',false)
            });

            this.preVal=res.data.result;
        })
    },
    //检查车牌号是否重复
    validate(number){


    },
    //车牌前缀
    getPre(item,index){
        if (index===0) {
            this.preValItem=item
            this.preVal.forEach(item2=>{
                if (item!=item2.prefix) {
                    item2.isActive=false;
                }else{
                    item2.isActive=true;
                }
            })

        }else{
            this.preValItem2=item

            this.preVal2.forEach(item2=>{
                if (item!=item2.prefix) {
                    item2.isActive=false;
                }else{
                    item2.isActive=true;
                }
            })

        }

    },
    changeInput($event,index){
        if (!$event.target.value) {
            return
        }
        let that=this
        let myInput='myInput'+index
        this.$nextTick(()=>{
            that.$refs[myInput].focus();
        })
    }
  },
  mounted(){
      this.queryPrelist();
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/config.scss';
.item {
  width: 30px;
  height: 30px;
  background: #0c4e8e;
  border-radius: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
   cursor: pointer;
}
.activeItem{
  width: 30px;
  height: 30px;
  background: #F59A23;
  border-radius: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
   cursor: pointer;

}
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body {
  padding: 10px 15px 0px;
  padding-right: 0px !important;
  padding-bottom: 0px;
}
.item2 {
  cursor: pointer;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 30px;
  height: 30px;
  background: #ececec;
  border-radius: 2px;
  line-height: 30px;
  text-align: center;
  color: #999999;
}
.item3 {
  width: 38px;
  height: 38px;
  background: $--color-primary-liyu;
  border-radius: 4px;
  margin-right: 12px;
  line-height: 38px;
  text-align: center;
  color: #ffffff;

  input{
      width: 100%;
      height: 38px;
       color:$--color-primary-liyu ;
        border: 1px solid #AAAAAA;
        /*padding:14px*/
      text-align: center;
  }
}
.number {
  width: 550px;
  height: 61px;
  background: #ececec;
  border-radius: 4px;
  display: flex;

}
</style>
